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1-HTML 

HTML = Hypertext Markup Language 


HTML J1 - 1 


<html> 

<head> 


A ^ j^Jaj V j 1 g ».<vji. j <UL^a]| Cjbljic-I J Lo J£ 


</head> 

<body> 

</body> 

</html> 


I g ■ ‘' a ~' 4 -vq, ^-»\l ^Jc, ^jJaj*j j jgJaJ Lq 


HTML J1 lA Tags J> - 2 


<a href="http://www.google.com" target="_blank">Coogle</a> 


j Ouf firu P*< 


* 7 T l C*e?4 


A 


Gooalc 


% 


C u yttpsv www.900glc.c0m.sa !l* ’ d=cr._^j! = l>~* . 


«Otamj Saerch imagas Mapi Play YowTut» Gmatl Dnyt Mora 


^ ^CJSJJ <jiij _blank U^aLi. J Jjia ^c. J^j> C 5 ^- £JJ^ Jskjljll 


1 ^jLuoC. ilTlg 




<a href="http://www.google.com” target=".blank">Google</a> 
<img src="http://placehold.it/l 00/100" title="Hello"> 





ldt^iod 

tra 


Sj JH.JI j j^Jajj ojj.^ll (^gJc. <■ LJ (_gJil 4 <aKll jA title Jl J 
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Jl Aiilaj j 4_ptc. jl J cjjjA. Aja (■ % nS n ^^kj teXt Ac jj Jtlall j jLkJ^I Jiia. jA jnpilt J' 

Lptalj olj?. c_s(Jll p&ll ja value 


<input type="text" value="New"> 


oJ JLlail (jj ^ajaj J^*j 4 j 3 t. nSln jaju)VI Ja jA j paSSWOrd <^1 ^jji' 


<input type="password" value=""> 


^ jj£' j& j hl j-* <alia-a ^La-A.1 t^ji j Jaia (jjjtjc. jc. jjstj jLua c . 1 gheading <J' 

jL 1 j jauujal jA j h6 


<h 1 >Story Title</h 1 > 
<h2>Story Title</h2> 
<h3>Story Title</h3> 
<h4>Story Title</h4> 
<h5>Story Title</h5> 
<h6>Story Title</h6> 


Aj| jbjcVI ^ (*uJa jil Ajjtc j-aj^Li atja. c . nSnj jA j paragraph J' jA C5^' p J' 

aJ uKI ' J£uiii Jlla j j-saiLk e^tjj enter j' space <—itiLuja (j' 


<p> 

This Is P 


Hello 


Again 


From 

I 

Paragraph 

</p> 

<brxbrxbr> 

<P> 

This Is P Hello Again From Paragraph 
<brxbrxbr> 

This Is Another Line 

</p> 

ITiis Is P Hello Again l rom Paragraph 

ITiis Is P llello Again From Paragraph 

ITiis Is Another I.ine 
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Story Title 

Story Titlc 
Story Title 
Stoiy Title 

Story Tttle 

ĔC«y L LllC 










































<jj£j Li ^jLudC. 



4>jvJI (j^ j .. images ^^^1 j^Jj^ sj^ team ^>^1 j-^Jj^ sj^ Sjjj^JI jj^ L<J 


<img src="images/team/steve.jpg"> 


SjJ^ Ijj £^.JJ C5"^4 SjJ J^JJ^Jl C5^ Sjjj^all (jj^J L<J 


<img src="../steve.jpg"> 


Sjjj^aJl jg )Vi (jLudC. (J rl Jl ^ 1 j-c <j-g -Jajlj (jo Sjjj^a 1 (jjjjlc. jJ 


<img src="https://www. google.com/images/srpr/logol lw.png|"> 


Google 


<img src="steve.jpg" alt="Steve Jobs"> 
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^ Inew ^Jc. ^jjja A^i^l ^ new story j'jjl' lpj^ ^ 

Uji.' j' j^j jl 


<a href="#nevtf'>New Story</a> 

<h 1 >Story JName</h 1 > 

<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is My Story This Is My Story</p> 
<p>This Is A New Story</p> 

<p id="new'’>This Is A New Story</p> 





4r C 1 ‘ Kle^/CJlJi^W/er^Desktap^HtirUndotntnil^neyy 

Ne\\ r ^lorv 

This Is A New Stor>’ 

This Is My Story TTiis Is My Story 

Story Name 

Tliis Is My Stoiy This Is My Story 

This Is My Story This Is My Story 


id J' new J' j .. (j* 1 j' jjl' j * <jj* a J' ^ new story 

jtjj*ll ja href J' ( 3 j* new J' j .. j'jjl' o * j ^ ^ C5H' u'j^' 

jlj^ll Lol aA A^. jJJ <j| 


4* pgUjl Head J' j HTML J> - 3 

lalu Jj' ^ J HTML . HTML5 ^jUV' JjiUU ja DOCTYPE J' 


<!DOCTYPE html> 
<html> 

<head> 

</head> 

<body> 

</body> 

</html> 


<head> J' J^U c_ j 4 j jjU ‘'VI j <Jjj*J' AAH' jaJC.Jjj j^aUJ' ^^-allaJ' jj-ajjl' Jj£ 
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<meta charset="utf-8">i 




























; (JlLa <hG3d> J' J^>'^ L , j ciA£^p^ <jc. LJ j-JI cii^j Lo^ ^]]| ^^]| c. ^x^j 


<meta name="description" content="Welcome To My Website|"> 


Twitter 

httpi .* tvdiur corn' • T*ct«r * 



I^TTTITSTIlTTrWSR* • -U41 4JR*!i li . 


11 iM B 

SrSlii**ww# 


mĔĔmm 

YouW th 1 p*99t 2 tirr»>: UM vn " 

iwu 




<head> J' J^ j £3 j^' j' <^i^l Jj' Jja <_Ji' tab J' ^ j$-^£ c^' 0 'j^ 

; JiLa 


<title>My Page</title> 



"X® bhitter ■ &Qagifl $e-jrch j: ^ (TJ SDdtitraip 


Q ' fFkr///C AJstrs/Zero/DcAiep/'Htin l/indtfxh Etti I 


<he3d> J' J^l^ C t n£j j JaI£]Lj CSS J' (J^aLil] liJa £jJaj ^jj j CSS J' (J^aLilJ (j-^aLi. 


<style> 

</style> 


<head> J' ^ j folder J^'^? j' <_sj^' ^ css J' (j-^al jAJ g.Lc> JlIjuoI jA 


<link rel="stylesheet" href="|style.css"> 


J' J^ j javascript J' ^ J*^W ^j javascript JL? ^lji. 

(il j£] j <body> J' J^ j^.jJI J j > ^»Uil l Jjs <L*ij <head> J' ^ j ojc. j <head> 

<body> J' J^^ -^a jjs-k <body> J' ^*jaj 


<script>alert("Welcome To Js");</script> 


<head> 

cmeta charset="utf-8"> 

<meta name="description" content="Welcome To My Website"> 
<title>My Page</title> 

<style>p{color:red}</style> 

<link rel="stylesheetf href="style.css"> 

<scriptx/script> 

</head> 


<head> J' J^'^ lAj^i 1 *II ^j^-sl ^js. >^->11 c_jjjjj1I 
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" CllLaj£ " j ^9 L*^ 4 ^ CIjLc jix>i Jn^J (j^ijjjlc* j] 


</- r/j/s /s Paragraph Comment *->| 

<p>This Is Normal Paragraph</p> 


<!-- TtliS IS Paragrapb Cornm^Ht —> 
<p>Thi5 Is Horinal Pa ragraph< /p> 


(J£juJIj (jj5L) CllLc ^9 LqA ^jIjj ^ A CllLa jix>c (jdx>a cJjj] ^ ^jjjjLc* j] 


</-- href="http://www.google.com u >Google</a> -->| 


Block J j Inline Jt pljjl - 4 

csr^ (Ja-aI ja c^*j c^ j inline 4 ^-jj span J' j img J' ja J'^ c^' cs* 5 

AiLoui ^Ull <jC* jj^aJC* (J£ *lxdJ (jjjjlc* j] j I g ^ >>» ^ t ^ Lg_!£ <jj£j c Ll£jji]| jl jjj^ail jl cLL<J£il 

SJ JliJl (J j <br> 


<a href="#">Linkl </a> 

<a href="#">Linkl</a> 

<a href="#">Linkl </a> 

<a href="#">Linkl </a> 

<br> 

<i|mg src="steve.jpg" alt="Steve"> 
<img src="steve.jpg" alt="Steve"> 
<img src="steve.jpg" alt="Steve"> 
<img src="steve.jpg" alt="Steve"> 
<br> 

<span>Span1 </span> 
<span>Span2</span> 
<span>Span3</span> 
<span>Span4</span> 



J^ C5^ C 5 ^£ (J$ j' CS-^ C5* J block 4^jj div J' J h J' J P J' C5^ C5^' >-^1^' 

iaJalb h J' J p J' lSJ ^^Ji diV J' J JUJI jj <bf> iaa-j Uo Jjc (jja 


<h 1 >Story Name</h 1 > 
<p>This Is Paragraph</p> 


4^'^W Lists J' - 5 

oj Ji^ll jj ja jjc. j& ojbc. ^ j unordered list J' 


Story Name 

ITiis is Paragraph 


<h2>Unordered List</h2> 
<ul> 

<li>Html</li> 

<li>CSS</li> 

<li>Javascript</li> 

<li>jQuery</li> 

</ul> 


-- ^ = 

C ' n C.'V £i'Zc i UiDc^Jc^^ILji : L 1 n/u.'>Crdl 

Unorilcrcd List 

■ Html 
« CSS 

* Javflscrt|>i 

* jOuery 
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£jJajll aJ j ->■ > jajiA Ajjjjla j<a jj£1_j 4-o3j-a 4 _ajU3 (_jC. SjIjC OrdGTGCl Nst <Jl 

a^ja jj£j ^ljja^l 


<ol> 

1 

<li>Learn Html</li> 
<li>Learn Css</li> 
<li>Learn Javascript</li> 
<li>Learn PHP</li> 

</ol> 


Order List 

L LtJiTTi H[ml 

2, .Lram Css 

^ T.enm jjn,\ascript 

4 Lcam PHP 


ei <l!LaVI (_£ j eliilla ^^III (J^jIoIIj c_jjjjj]Ij ‘LoiijA Ajajlill ^llaj 4 n» a ^l jjl_j Starting t3g 


' flC. 


<ol type="Af’> 

<li>Learn Html</li> i 
<li>Learn Css</li> 
<li>Learn Javascript</li> 
<li>Learn PHP</li> 

</ol> _ 


Order List 

A Lcjltti Hlinl 
B- Lcam Cf>s 
(' J .tJiTii Jav\asmpE 

D Lcam PHP 


<ol type*»T’> 

<li>Learn Html</li> 
<li>Learn Css</li> 
<li>Learn Javascript</li> 
<li>Learn PHP</I i> 

</ol> 


<ol start="50"> 

<li>Learn Html</li> 
<li>Learn Css</li> | 
<li>Learn Javascript</li> 
<li>Learn PHP</li> 

</ol> 


<ol rever^ed> 

<li>Learn Html</li> 
<li>Learn Css</li> 
<li>Learn Javascript</li> 
<li>Learn PHP</li> 

</ol> 
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<ul> 

<li>Html</li> 

<li>CSS</li> 

<li>Javascript 

<ul> 

<li>jQuery</li> 

<li>MooTools</li> 

<li>Dojo</li> 

</ul> 

</li> 

</ul> 


* Hcml 

* css 

* Iav3ficrtpE 

c jQmen r 
s MooTools 
o Doju 


sj Jlidl (_s j ^ ^ l $ ji= 4 ? ls * j description list J' 


<dl> 

<dt>Html</dt> 

<dd>Good Language</dd> 
<dd>Easy Learning</dd> 
<dd>Very Useful</dd> 

<dt>Css</dt> 

<dd>Very Good</dd> 
<dd>Fast Learn</dd> 
<dd>Bla Bla Bla</dd>| 

</dl> 


Descriprion List 

ntir.l 

OlililI I ;mru;in: 
Eas\ r Leaniiua: 
V«y l.'vffij 

Csi 

Vciy Good 

l.diUll 

Bda BLd BLa 


Font - 6 


Jlidll J Jajiallj b0ld J' iSj -a>n Jak J-a*jj j j^aj>^i‘Jl (.“ll gjmn £-Jjjl j-a b J' ^ J>■'iLa. 


<P> 

This Is <b>Bofd Text</b> 

/p> 


This Is Bold Text 


'*styie> 

0 bold 

ly { 

2 fonl*weighl bold 

3 } 

4 </style> 

</head> 

6z <body> 

7. <p> 

This Is <span dass=’bold'>-feold Text</span> This Is <span class=“bold">Bold Text< spang This Is <span class^bold^Bold Text</spa 

This Is <span class**bold’>Bold Text</span> This Is <span class^bold^Bold Text</span> This Is <span classs - bold*>Bold Text</sps 

This Is <span class-*bold*>Bold Text< span:J This Is <span class- , ’bold ,, >Bold Text</span> This Is <span class- ,, bold*:*Bold Text</$pa 

__ 


ta^.V Jjt^i^llj (Jjiall Ji ^j>>ijj j»jjA j CSS jjjjla jj ,a> ^‘ >,a " jl 4 7>jVill jjaj (^lc. Jj*- 
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jj^aj*J! j& j j (J! 


<p> 

This Is <»>itaiic Text</i> 

</P> 


S J JHJ! (j>a ^jJalj j ^JLjJal! jij^a! JjA«Vq^\l jj^aJaJ! AjIj£ jA j SITl311 (Jl 


<p> 

This Is <sjnall>Small Text</small> And This Is Returned To Normal 

</P> 


iiiis Is Small Text And This Is Retumed To Normal 


laaa <ja aj ^glwtJ j laJillj bold J' (jj J StTOIIg J' 


<P> 

This Is <strong>Strong Text</strong> 

</P> 


Ja^S ^^ojoia]! L^Hi.! <jJdij ^J JaJallj jtaliC cJl L 9J ls^ J GITI l)1 


<p> 

This Is <em>Beware :</em> This Is Wrong 

</p> 


oj JSjIIU j^-ki j Jia.1 (_> d! jUc. j! jjUjs! ^ f. vVL » n j blockquote J' 


<P> 

This Is My Research 
<blockquote> 

This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man 

This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man 

This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man This Is Famous Words Said By Famou$ Man 

</blockquote> i 
My Research Continued 
</p> 


This lb My Rcsearch 

This Is Pamous Words Said By Famous Man This Is Pamous Words Said By Famous Man This Is Famous 
Words Said By Farpous Man Ihis Is Famous Words Said By Famous Man Ihis Is Famous Words Said By 
Famous Man This Is l amous Words Said By Famous Man This Is Famous Words Said By Famous Man 

My Rcscarch Continucd 
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Tliis Is Deware: This Is Wrong 


This Is Strong Text 


l liis Is Italic 7ext 











































<jj " j aIo^JI Jj 3 " £jJaj J^jia jC* Sjiij^a CIjIjLj*J j£J jiajiJl jiiij] ^^liJLuaJ j q (Jl 

SJ Jll(JI 


<p> 

This Is My Research 

<Q> 

This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man 

This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man 

This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man This Is Famous Words Said By Famous Man 

</ q> k 
My Research Continuea 
</p> 


This Is My Rcscarch w This Is Famous Words Said By Famous Man Thit> Is Famous Words Said By Famous Man This Is Famo 
l nmous Words Said By Pamous Man ITiis Is Famous Words Said By Famous Man ITiis ls Pamous Words Said By Tamous Mf 
Man Tliis Is Famous Words Said By Famous Man This h Famom Words Said By Famous Man M My Research Continued 


JHJI jj jLl *aVI jjLIj UjIIIj 1§-JI jLJuJI 4^K\I ^Jjtjj j mark Jl 


This Is Famous <mark>Egypji</mark>| Words Said By Pamous Man 


. This h Famous Eeypt Words Said By Famous M-an 


J£juJ\j 1 g 1 JaU, £jJaj jl A m a A.l^, 


C_1 


UjuJ 


del J' 


<del>This Is Wrong Sentence</del> 


This I s W f one Scnw i ici? 


Sj IJI jLJlbJI <L^JI 


Jaa. ^ j del d' ^ j jns J' 


<ins>This Is The Right One</ins> 


This Is The Righi One 


J£joJI (JJ ClAjjJaljj]| J^\ AjLK jl ^LJjtj L-JJJJJ ^Jaj Jla ^Bjl ^a^JjoUJ J SUp Jl 

I Came Here At 5 tb Of October 


I Came Here At 5<sup>th</sup> Of October 


A-Ll jj jjk (jLa diaJ L_fljaJI jl LaK]! 4 jL&] ^Vn»"n j SUp J' ^ J SUb J' 

ei JtJJl jj yl* 


HiO 
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Table J1 - 7 

<table> 


<tr> 

table row 

<thx/th> 

table heading 

<tdx/td> 

table data 

</tr> 


</table> 



<able> 

<ir> 

<id>Javascrlpt<Ad> 

<td>PHfl</td> 

</ir> 

</table> _ 


^tatoSe l»rder=l M > 

*ir> 

<td>Hiinl</td> 

■:Ld>C^ 5 ^/ld> 

<td>Javaicripi</idi> 

<ltf>PHP</ld> 

</ir> 

</iable> _ 



Hlml 

Css Javascripl 

PIIP 






<table border=“1 width=MOO‘> 
<ir> 

<td>Html</td> 

<td>Cs5</td> 

<td>Javascript</td> 

<td>PHP</td> 

</ir> 

<tr> 

<td>5Q%</td> 

<td>65&</td> 

<td>80%</td> 

<ld>85%</td> 

</tr> 

</table> 


Html |Css 

Javascript 

PHP 

50% j|65% 

80% 

85% 


<tr> 

<td>Date</td> 

<td>Html</td> 

<td>Css</td> 

<td>Javascript</td> 

<td>PHP</td> 

</tr> 

<tr> 

<td>October</td> 

<td>50X</td> 

<td>65K</td> 

<td>80X</td> 

<td>8S%</td> 

</tr> 

<tr> 

<td>Novem b«r</td> 

<td>60X</td> 

<td>70»</td> 

<td>85X</td> 

<td>90%</td> 

</tr> 

<tr> 

<td>December</td> 

<td>70%</td> 

<td>80X</td> 

<td>90S6</td> 

<td>95fc</td> 

</tr> 

</table> 




Date 

Html 

Css 

Javascript 

PHP 

October 

50% 

65% 

80% 

85% 

November 

60% 

70% 

85% 

90% 

December 

70% 

80% 

90% 

95% 
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_ 


_ 










<table border="l" width="400*> 

<caption>This Is My Web Skills</caption» 

<tr> 

<td>Date</td> 

<td>Html</td> 

<td>Css</td> 

<td>Javascript</td> 

<td>PHP</td> 

</tr> 

<tr> 

<td>Oaober</td> 


I his Is My Wcb Skills 


I 


|Date 

Iltml 

Css 

Javascript 

PIIP 

|October 

50% 

65% 

80% 

85% 

|November 

60% 

70% 

85% 

90% 

|December 

70% 

80% 

90% 

95% 




























































<style> 

table caption |color.#OOF,font-weight bold| 
</style> 

</head> 

<body> 

<table border="l" width=“400’> 

<caption>This Is My Web Skills</caption> 
<tr> 


amr_ 


This Is Mv Wcb SkiUs 

_ * _ 

Date 

Html 

Css 

Javascript 

PHP 

Octobcr 

50% 

65% 

80% 

85% 

November 

60% 

70% 

85% 

90% 

December 

70% 

80% 

90% 

95% 








der- 1 width- 400 > 
<caption>This Is My Web Skills</caption> 
<tr> 

<th>Date</th(> 

<th>Html</th> 

<th>Css</th> 

<th>Javascript</th> 

<th>PHP</th> 

</tr> 

<tr> 

<td>October</td> 

<td>50%</td> 

<td>65%</td> 

<td>8056</td> 

<td>85%</td> 

</tr> 

<tr> 

<td>November</td> 





lliis Is My Wcb Skills 


Datc 

Html 

Css 

Javascript 

PIIP 

Octobcr 

50% 

65% 

80% 

85% 

November 

60% 

70% 

85% 

90% 

December 

70% 

80% 

90% 

95% 


<caption>This Is Our Hosting Plan</caption> 
<tr> 

<td>Plan l</td> 

<td>Plan 2</td> 

<td>Plan( 3</td> 

<td>Plan 4</td> 

</tr> 

<tr> 

<td>Hard Disk 30GB</td> 

<td>Hard Disk 40GB</td> 

<xd>Hard Disk 50CB</td> 

<td>Hard Disk 60GB</td> 

</tr> 

<xr> 

<xd>5 Databases</td> 

<td>6 Dalabases</td> 

<td>7 Databases</td> 

<td>8 Databases</td> 

</tr> 

<xr> 

<td>3 Ftp</td> 

<ld>4 Ftp</td> 

<xd>5 Fxp</xd> 

<td>6 Ftp</td> 

</tr> i 

<tr> 

<td>50S</td> 

<td>60S</td> 

<td>70S</td> 

<td>80S</td> 

</tr> 

</table> 


— 























'lliis Is Our Hosling Plan 

Planl 

Plan2 

Plan3 

Plan4 

Hard Disk 30GB 

llard Disk 40GB 

Hard Disk 50GB 

Hard Disk 60CB 

5 Databases 

6 Databases 

7 Databases 

8 Databases 

3 Ptp 

— 

4 rtp 

5Ftp 

6Ftp 

50S 

60S 

70S 

80$ 
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-_ 

— 











































































































































<$tyle> 

table,td t th (borderl px solid #676767} 
table Iwidth 500px} j 
thead td {font‘Weight;bold;text*align:centei|} 
</style> 

</head> 

<body> 

<table> 

<caption>Thls 1$ Our Hosting Plan</caption> 
<thead> 

<tr> 

<ld>Plan 1 </td> 

<td>Plan 2</td> 

<td>Plan 3</td> 

<td>Plan 4</td> 

</tr> 

</thead> 

<tr> 

<td>Hard Disk 30CB</td> 

<td>Hard Disk 40GB</td> 

<td>Hard Disk 50CB</td> 

<td>Hard Disk 60CB</td> 

</tr> 


lTiis Is Our Hosting Plan 

Planl 

Plan 2 

Plan 3 

Plan 4 

Hard Disk 30GB 

Hard Disk 40GB 

Hard Disk 50GB 

Hard Disk 60GB 

Databascs 

6 Databases 

7 Databascs 

8 Dalabases 

3Ftp 

4 Ftp 

5 Ftp 

6Ftp 

50$ 

60S “ 

70$ 

80$ 


CSS J' CP Jj-^' o-^j^ ls* <thead> J' 


<style> 

table,td T th {borderl px solid #676767} 
table lwidth.500px} 

thead td { font-weight;bo!d;text*align:center;color;#OOF }j 
tfoot td { font-weight:boldrtext-align:center:color:#FOC| ] 
</style> 


<tfooi> 

<tr> 

| <ld>50S</td> 
<id>60I</td> 
<td>70S</td> 
<td>S05</td> 
</U> 

</tfQQt> _ 


I ITiis 1$ Our Hosting Plan 


Plan 1 

Plan 2 

Plan 3 

Plan 4 

Hard Disk 30GB 

Hard Disk 40GB 

Hard Disk 50GB 

Hard Disk 60GB 

Databascs 

6 Databascs 

7 Databascs 

8 Databascs 

3 Ftp 

4 Ftp 

5 Ftp 

6Ftp 

50S 

60S 

r 70$ 

80S 


CSS J' (JJJ^ Cp- Jj^' J^-J J-^J^ <tf00t> J' 


<tr> 

<td>Plan 1 </td> 
<td>Plan 2</td> 
<td>Plan 3</td> 
<td>Plan 4</td> 

</tr> 

</thead> 

<tfoot> 

<tr> 

<td>50$</td> 

<td>60$</td> 

<td>70S</td> 

<ld>80$</td> 

</tr> 

</tfoot> 

<lr> 

<td>Hard Disk 30CB</td> 
<td>Hard Disk 40CB</td> 
<id>Hard Disk 50CB</td> 
<td>Hard Disk 60GB</td> 

</tr> 


ITiis Is Our Hosting Plan 


Planl 

Plan 2 

Plan 3 

Plan 4 

Hard Disk 30GB 

Hard Disk 40GB 

Hard Disk 50GB 

Hard Disk 60GB 

5 Databases 

6 Databases 

7 Databases 

8 Databases 

3 Ftp 

4 Ftp 

5 Ftp 

6Ftp 

50S 

60S 

70S 

80S 


jjj ^jUjI! J ^Vi ' j£i thead J' 


tfOOt J' 'jJaa* ji 
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CSS <jJ=> up J j^' o 3 '<tbody> J' 


<tr> 

<td>Programming</td> 
<td>Programmlng</id> 
<td>Web De5ign</td> 
<td>Web Design</td> 
<td>Web Design</td> 
</tr> 

<tr> I 
<td>PHP</td> 
<td>MySOL</td> 
<td>Html</td> 
<td>Css</td> 
<td>jQuery</td> 

</tr> _ 


Programming 

Programmmg 

Web Design 

Web Design 

Web Design 

PHP 

MySQL 

|Himl 

Css 

jQuer> 




colspan J' 




j A 1 j jJoa \ iW (j-p (JA jl£j jLuoC^ 


<table> k 

<tr> 

<td colspan="2">Prograniming</td> 
<td colspan-'3‘>Web Design</td> 

</tr> 

<tr> 

<td>PHP</td> 

<td>MvSQL</td> 

<td>Hlml</td> 

<td>Css</td> 

<td>jQtiery</td> 

</tr> 

</table> 


?rogrammin 

i 

Web Uesign 

PHP 

MySQL 

Him] 

Cs5 

|jQucr> r 
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<capnon>uescriM i ne Kow5pan</caption> 
<tr> 

<td>Name</td> 

<td>Emails</td> 

</tr> 

<tr> 

<td>0$ama</td> 

<ld>0#n.n</td> 

</tr> 

<tr> 

<td>0$ama</td> 

<td>02i*n.n<Ad> 

</tr> 

<tr> 

<td>Ahmed</td> 

<td>At®n.n</td> 

</tr> 


De&cribc llic Row&pan 

TJanie 

Emuls 

Osania 

0@n.n 

Oaimni 

02@n,n 

Ahined 

A@£Ld 


rowspan J' ^viVi j ^jv j j* uL^ 



j rowspan J' j' colspan Jl ^jjj U1 jLlLaJI ^ 03 ^ u^ ^jV : j^L» 


^Sjll Jj jj La Jj 3 Ajl£-a jl£ Jll td J' (J^Lj f jV 3 j' 2 Llii-a 


<table> 

<caption>Describ€ The ColCroup</caption> 
<colgroup> 

<col span-T style-‘background:#£EIT> 
<col span="3" style=*background:-stDDD’> 
<col span="2* style=*background «SAAA’ > 
</colgroup> 

<tr> 

<td> Pr ogramming</td> 

<td > Prog ram m i n g</td> 

<td>Design</td> 

<td>Design</td> 

<td>Design</td> 

<td>Design</td> 

</tr> 

<tr> 

<td>PHP</td> 

<td>MySQL</td> 

<td>Html</td> 


■Pescribe Thc ColGroup 


Programming 

Programming 

Design 

Design 

Design | Design 

?iip 

MySQL 

iltml 

Css | j Q ucry J Photoshop 

PHP 

MySQL 

Hlml 

Css 

jQucry 

Photoshop 

PHP 

MySQL 

Html 

Css 

jQucry 

Photoshop 

PHP 

MySQL 

Html 

Css 

iQucry 

Photoshop 

PHP 

MySQL 

Html 

Css 

jQuery 

Pbotoshop 


J Lj^C- JjI ^LjJalj j^Lc ^JJ j LiLaJ CSS (Jt L$J (Jsiuua JSoIj $JUC-VI (j U a nl <COlgrOLip> (Jt ^^Lij 

L (J-lJUdJJ JJLj^dC- J ^.1 j L (J-lJudJJ ^ill La^IjC- 3 lJI J (jfc} 


lUiini 
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4jU hVu t i ) (J* a*j J Class J' - 8 


<style> 

.test 

{ 

color:white; 

backgroundired 

} 

.test2 

t i 

color:blue 

} 

</style> 

</head> 

<body> 

<div class="test"> 

This Is Div 1 
</div> 

<div class="test2"> 

This Is Div 2 
</div> 

<div class="test"> 

This Is Div 3 
</div> 

<p class= ,r test2">Thls Is P</p> 
</body> _ 


This Is Div I 


This Is Div 2 


This Is Div 3 


I his Is P 


^j j CSS J' Cp j' p j' div J*U «JjULuJj (j^j^ class J' 

style J ^jjaj ^j (jjx>a ^jojIj <sjjoijj l-jj\ 3^^\I cl3SS 

"test" f^>V' (jiij ijjia jc. div > i^jj j CSS J' cp- 


.our*span 

{ 

color:green| 

} 

</style> 

c/head> 

cbody> 

<div class="test"> 

This Is Div 1 
</div> 

<div class^ test^ 1 ^ 

This Is Div 2 <span class«"our-span">Span</span> 
</div> 


This Is Div I 


This Is Div 2 Span 


This Is Div 3 


This Is P 




,UJI 


l3 


iui±n 




^lklj j ^LaJl 


c3 


IjudJJJ 


cJi.1^ ^juoLj Ajuluoj j (juaLi. ^jJjoijj ^jJaJ <jl (j£^a3l 
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Form J' - 9 


<form name="register"> 

<label>username</label> 

<input> 

</form> 

Usemame, | 

LgC-l aj 4 jjU-wJI diljLnll Aj 3 j^JaJj (^^ill (J£juJI jA ^lc- J£joJ form (Ji 

jjuiai*JI Ajjuuii ^ label Ji 


Jj\£11j L ^jA ^jjjj j jjj£ ^ljjl aI input J' 


<torm name= register > 
<label>Username</label> 
<lnput type-"text > 
</form> 1 


orm name= register > 

<label>U$ername</label> 
<input type="text "> 

<labcl>Pa$$word</labcl> 
<input type»"pas^vord"> 

</form> 





<form name^Yegister"^ 




<label>U$ername</label> 

<input type="text name="username" value="Osama"> 

<labcl>Pa$sword</labcl> 

<input type»"password" name» password"> 




</torm> 


Usemame 


Password 


Jjui <j«J£ ^jaJ jl j-saj f.l jjuj (■ % n» ^JII AjL&II ^jj jA type ! inpUt J' J^U jA Ua L_fljj*j 
■4uaJjuuaII ^^Jc jj-o ■'LauajJl ^^9 j^JajA (_glll <A.I_aJl ^juiI jA |\|3me 

(jl Aj\j£ Jj 3 £JJ-<dl oj^. J^JaJA (^l U^.LaJI <jj3 ^ Value 
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<label>U$ername</label> 

<inputtype="text' name="u5ername" value=' " placeholder="Iype Your Namej’> 


<labcl>Pa$$word</labcl> 

<input type»"password" name= password"> 


Usemame 'ype Ycpur Name Password 


<label>U$ername</label> 

<input type="text” name=”username" maxlength="10f"> 

<labcl>Pa$$word</labcl> 

<input type»"password" name» password"> 


Usemame 

12345673901 i 




Password 


<label>U$ername</label> 

<input type="text" name="username" maxlength="10"> 

<labcl>Pa$$word</labcl> 

<input type="password" name- password"> 

<lnput typc-' checkbox"> 

<label>Remember Me</label> 


Usemame 


Password 


Remember Me 


< I n p ut type-"sij b m i t' > 


Subjriit 


CllljLlJl ^ 


llUlJ 


<lnput type="submit' value-"Sign Up"> 


<torm name= register > 


<label>Username</label> 

<input type="text" name="username ' maxlength="IO’> 


<label>Password</label> 

<lnput type- 'password" name- pas$word"> 


Sign Up 

—r~ 


<input type-"checkbox"> 
<label>Remember Me</label> 


<input type»'submit value-"Signup"> 
</form> 


Usemame 


Password 

i 

Remember Me 

Signup 



Page 20 




























































<\ nput type— "buLttin" rianne-"Say Hĕllo" Hella r, ?j 


| ^ Ssy Hello 


<\ r - pLit Lype- M buUuri' r iairie-"Say 11e11u" valut-' Say He I \& n unditk-' sjyHe11o0"> 


javascript J' ^ JU 


^script^ 

fupirtinn *ayHdM} 
alertCHello HTML 11 }; 

'i 

</sc ript> 


Usemame 

Liu^:^! t. iri 

K*H*A 


Password 

□ Romcmbcr Mc 

Say Halb Signup 

t, Lj!_ 



^-1Lj]| C* vWj j^]| LS^* -Hc* j 


Reset 


djLAlK ^jxj Jai-jJa]| -Hc* f0SGt cJl ^ u ^ 


tg-ijjjtc* lia.1 ^i]! jl jj]| * C5"^ TGSGt ^]^ jjxj j 


<ir*put type-"reset" value-"Restore Defaulf> 


■: '^L be 1 :- Uplcmd Yu u r Cv /1 db e 1 > 


<i nput type="fik"> 


UpLoad Your Cv 

Choose File 

No file chosen 


JjL J& 4 -ai*Ul Jc. 1^*3jt Choose file ^ 

javascript J' c> file J' gjl' ^ value J' -.^■v1..il j*»a'j^ | 4 -alA <Ja jU-a 


^UUj cisu ja ^g-uu submitJ' <jajj UJ ci j WUj s jj*U1 Jc. oojii U 


<i nput t/pe-" i it aqe 5 rc-’lmp;// p Ia« hpld.it/ 100/ 1 00" alt-'Submit r > 



Rest^re Defau|t 


Usemame 

Password 


<input type-Yeset"^ 


Usermtme asdasd 
Password. v 
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<i n put t/p«-" h i d d e n " va I ue-"tB st i n qf '> 


submit j^ 4-?-«jJ' £* c hidden <J^ LJ j gki» LjLLij <_A^ 

jHaIi Jj^“' ^Jc. 


<input type-"rddio" name-"browser" value-"Chrome"> Coogle Chrome <bf> 
<input type="radio" name="browser" value="Firefox*> Mozllla Firefox <br> 
<input type-"radio" name-"browser" value-’Opera"> Opera 



<input typc-yadio’' namc-"browscr" vaiuc-'Chromc"> Cooglc Chromc <br> 
<input type-"rddio" name-brow^er" value- Tirefox‘> Mozilla rirefox <br> 
<input tYpe="radio" name="browser" yalue^OperaS Opera <br> 

<label>Choose Your Mobile</label><br> 

<input typc-"radio" name-"mobilc| value-"iPhonc"> iPhone <br> 

<lnput type-"radio" name-"mobile value-"Samsung > Samsung <br> 

<input type="radio" name="mobile" value="Nokia"> Nokia <br> 


j (jj3 AjjLJl u-a 4_iaaj jtikl <__fljc.l jLio C . <_-a j jSj HBITIG <Jl jl cJW "^l (O^ ! OjIa JJa 

SjiiJj AJakj jjc. (_>ujj 1 (j * i*Viu browser j*^Lc. 6 Jl name J' j^ ^ c^' ^j^' j-» Oaij 

jjJa*j 6 Jl^ 

Choose Your Browser 

• Ciooglc Chromc 
Mo/illa Firefox 
Opera 

Choose Your Mohilc 

• iPhone 

i Samsung 
Nokia 


Page 22 


Usemame sadasd 
Password 

Upload Your Cv Choose File No file chosen 
Rcmcmbcr Mc 


100x100 


Say Hello Signup Restore Detault 
































^sj Jll 3 J 1 ^ name J' j^ j 


<fnput typc-"radio" name-"mobilel" value-"iPhone"> iPhone <br> 
<input type-"radio" name-"mobile2 ' value-"Samsung“> Samsung <br> 
<input type="radio" name="mobile3|’ value="Nokia"> Nokia <br> 


jia*J Jalij 3 J' j'-^' 

* iPhone 

* Samsung 

* INokia 


Fieldset J' j Textarea J' -10 


<label>Your Message</labelxbr> 
<te xtarea> </tex ta re a> 


Yout Message 


<label>Your Message</labelxbr> 
<textarea rows="6" cols=‘G)0"></textarea> 


Yoiu Message 


i 


lg-Lc jj£I l_u£I ^iij jg )Vn ^^111 j j^ljj COl (Jl j TOW 


<label>Your Message</labelxbr> 

<textarea rows="6" cols="60">Yoi^r Name : |</textarea> 



S j^ ^l l_uS! 1 j uii (j jajj eja. 
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<fieldset> 

<legend>Personal lnformation</legend> 
<label>Username</label> 

<input type='text" name^usemame" maxlength="l 0"> 

l 

<br> 

<label>Password</label> 

<input type* 'password" name- M pa$$word"> 

</fieldset> 



pPersonal IniormaUon 

Usomamc 


Password 

i 




jljjc. legend d' j c> a '= dj- 1 ^ ®j?> <d=^' fieldset d' 


<field 5 et> 

<legend>Send Options</legend> 

<select> 

I 

</select> 

<input type="button" name="Say He\\o m value= Say Hello" onclick=’sayHello()"> 
<input type-"submit" value-"Signup"> 


Seiijd Oprioiu 

■ Say Hello | Signup Restore Datault 

i 'j jj' jjl' d^ j^-^ c^' j j» select d' 


<fieldset> 

<legend>Send Optlon$</legend> 

<select name="time’> 

<option>Now</option> 

<optlon>Tomorrow</option> 

<optlon>After A Weekj</optlon> 

</select> 

<input type- "button" narne-"Say Hello** value= M Say Hello" ondick-'sayHello()"> 
<input type="submit" value="Signup"> 




3ay Hsll& Signup Resto-§ Detaull 

l omorruJ? 

Arttsr A 

After A - 





j'jjl' *j?* C5^' <->'j'^Vl jc. jj*^ l option d' j^' select d' »j> 
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<select name= M time" disabled|> 

<o pt i o n >N ow</ opt i □ n > 
<opllon>Tomorrow</optbti> 
<optlon>After A Week</opt|on> 
</select> 



Send Options 



L 

NOW Cr '| 

Say Hello Signup Restore Detaiilt 




Lg-Lc jLiiJ jxjA jIa £j \jbiikVI disabled U 


<select name= M time M size= M 3 M > 

<o pt i o n >M o w</opti □ n > 

<o p t ion>T om o r row</o pt Son > 
<optlon>After A Week</optlon> 
</select> 


Send Options 

Now 


Tomorrow 


After A Week 



Say Hello Signup Restore Default 


Sa^.1j Ig-Lc jLikA ^^111 lg-9 jjJuI ^ill dj|jLiikVI jc. jjxjj sizG cJ^ ^ ^^^^iJI ^Sjll 


<select name="time" multiple> 
<optlon>Now</option> 
<option>Tomorrow</option> 
<option>After A Week</option> 
<option>Now</option> 
<option>Tomorrow</option> 
<optlon>After A Week</option> 
</select> 


Scad Options 


usnsssoii. 

After A^Week 

Now _ J Say Hello 


Signup Restore Detault 


ctrl j click cjjj^ jc- j^' j^' multiple J' U 


<select name="time"> 

<optlon dl$abled(>Now</optlon> 
<option>Tomorrow</option> 
<option>After A Week</option> 
<option>Now</option> 
<option>Tomorrow</o|Jtion> 
<option>After A Week</optlon> 
</select> 



Tomorrow 

After A Week 
Now 





Tomorrow 

After A Week 

Say Hello Signup Restore DetaUllt 

Tomorrow 

- 1 


ejlik' ii* j\jja.V' J^j disabled J' option J' cijUjl£^' 


<select name="time"> 
<optlon>Now</option> 
<option>Tomorrow</option> 

<option select^4>After A Week</option> 
<option>Now</option> 
<option>Tomorrow</option> 
<optlon>After A Week</optlon> 
</select> 


Now 

Tomorrow 


|After A Week 

Now 

Tomorrow 

After A Week 

Say Hello Signup Restore Default 

After A Week • 



I jjojLlo UjLjikl jl JA-Iaj 4^1^ (J 




tl t * _i_ j _i 11 . V 


Page 25 
































































<select name='tHme l, > 

<optlon value- r>Now</optlon> 

<option value-"?”>Tomorrow</option> 
<option value= "3">After A Week</option> 
<option value="4">Now</option> 

<option value- 5’ >Tomorrow</option> 
<optlon value^"6’ >After A Week</optlon> 
</select> 


Now 

Tomorrow 

Now 

Tomorrow 
After A Week 
Now 


| Say Hello | | Signup 


Restore Default 


(jjji cdlil ^ ^ jg hjj AijLu (_>uJ ^ijll V3lUG J^ Lal 


<select name='time"> 

<optgroup label="Ne*a/ Time > 

<option valuc-"1 ">Now</option> 

<option value="2 n > 1 omorrow</option> 
<option value="3">After A Week</option> 
</optgroup> 

<optgroup label-Tar Time"> 

<option ^alue^^Wear^/option^ 

<option value="5">10 Year</option> 
<option value-"6">20 Year</option> 
</optgroup> 

</select> 


Near Time 

Now 

Tomorrow 

After M Week 

Far Time 



i Year 

10 Year 

20 Year 

5ay Hello Signup Restore Default 

Now 




j Sj^. (j« dilc- j - a-^^H jLic. optgroup J' 












































Iframe J* -11 



jj£Ij ^jjxjjoij j ^jc^Ijj A-^L^a]| s£§ j-oj (JjjljjujI jLaic» jframe cJ^ 


1xjU 




<body> 

<lframe name=’W3_Org" src= 'http://www.w3.org" wldth^'700” helght="400 scrolllng«""x/lframe> 

<lframe name-^WS-Schools" $rc- ,, http://wwvk'.w3$chool$.com" wldth-"700'' h|elght-"400’ $crolllng-""></lframe> 
</body> 


mmm 



sP.wirKii-wrt KfcMSt-4s»nr 


• Cdl for Res'ww. HTMLE 
ProsoMd Resorrmardnticn 
Puttinhnd 

1» »WWI« .V4 "W.f 

TTl* nT\1 ‘AtOli; ~4in( »*•. |Ui - lkt£ 4 

-»^>o»M"e«i»m»era»ji :rtirMLb r>s 

5f«rt:iKi> ortM Pt jti rrj»a ti»>jr it 
n»-M»kai9u«je«rito\lKillvutoVfft> i«- 


As» 

CoHW«»n(mO(i 


nnnmiir 


I» :i*«ni pWi 
rl Tn A •* 4aU 
»>/ 

«tur 



HTMt/CJS 

- Ui»n HTNL 

»lMIT MIWIS 
• Lesrr css 
> Umi/ CSSJ 
» l «Mr» rcrr-rrt»n 

j4v*Scrip4 


w3schools.com 

Ihr «t>rkf's lunj-rst aeto devHopirenl sile 

educate yourselt! 

' Irptinuil mmh 


HTML 


HfMl Tirorta 1 
IH ML lag Kefen>*ce 


CSS latortal 
LWL> Kereiei"’ 


_ 




<style> 

iframe {width:/00px;height:400px;margin:20px;overflow:hidden} 

■ </style> 
c/head> 

|rbody> 

<lframe name^^WS.Org" src="http://www. w3.org" scrolllng=""x/lframe> 

1 <lframe name-"W3_School$" src-^httpy/www.wSschools.com" $crolling-""x/lframe> 
c/body> I 


_ 


_ 


i 

















ptam-a pns =>ATin3.ATr .*unfRrw«p aboutwk 


TPCHNIC/iL 

RtPOWTS 


WEB AWD 
IM3USTR\ 


» Ca» tor Rc/icw* HTA1L6 
Propo»*d Reccmm«ndfiOcn 
Pubisl**d 

lf 6« ir<HI 71 141«/ r+m 

TS» WTWl AVrKrg r.-ri|i lm |i>-■*■:vr1 n 
ntpowitMKonKnbLri U I I.U IS« 
4:>LJui<h1iir. : 16 £l' IUM U 

ttc ccnc L>*uusgv ofit: '.Vc«M 'M(Jf 'AVo Hc 


IIb A»-*VA 4 : V.rt 
Cll-MiiM frt3C|l> 

«*«' 'MMiM 
Sltd 
«ff/ 

W«v*i*i <> (*:««> 

>m Inibn Nw.li 
(lhrl.it «Hi 
MwitSl» ATC 


• LMIT VK>DL 

tVtd buikJing 

- iWeli ?1 rifj 
> eActi BrSMr j 

- vA.li sn-jatj. 

- VA.1i 

* tf/ct» c«r»fcitcj 


w«t» r*Mtini i»T>rt 




•II» »I .<H I>1«4 l»l>«W| [iMM» >tfltl 


ui4i«c:m^ii4 >. takHtm *i - ■ 


firefox J' ^ <lUi Jl* jSI l_sL scroll J' overflow:hidden J' 
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<body> 

<lframe name=’WB_Org" src= http://v/ww. w3.org" scrolllng^no^/ttramo 
<lframe name-^WB.Schools" $rc-”http://wvwk'.w3$chools.com" $crolllng-"no"x/lframe> 
</body> 



TECHSIC^L 

Renopts 


WEBAND 

IM3USTRY 


r*KVWrts p^btt.patt ucwnr^SMP M»'</TW 5 C 


- Cell fcr HTT/\.5 Rropos*<l 

^•comneidalan Pual sh«n 


I f.f c V, *: VAto 

Cu**uit f«WC; k 

«nlatiNiM 
/y+**f* ff+r 


TTt» •TTm n; CriOUp v 'hM .1 

ihtlwi ls* 

j< Jn n»*.« t>4w cl trc 
:«c u»jM>jccit»BV»t«WViidcVirt» ti: 
H*fw«t»U ‘4itli|t i tnjmjr |»«TU [ irt»* 


Tly.-tnrk rcr m 
'»• ln(ton ijMti 
ci n* ::*t nnt 
■♦nl tw «Y3C 
nkton 



w3schools.com 

Ihc uTird s lorcns: wcta dcvclopmcnt sitc 

educate yourselt! 


Iti*rtfnti< nttttt 


HtML/CSS 

- I «yrr HTHI 

- Lesr- HTNL3 

- U*i» CSS 

• iMtt CSST 

• Lesr- Ocicsa-ao 



IITML 


HIML TutO.W.1 


)iiv*W r|p« 

• uurt «pr 


IITML rsc Kctcrcrcc 



05$ I Jtotiril 
CSS Rcfcrcnce 


<jjlx. Aitjiaj scroll J' u'-^ c 


J jL j jSj U1 V' scroll J' u^a u^ ^ j auto scrolling 

^L^al (J^)j£l 
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Entities J' -12 

j j^Jaj j ^Jc* jg Jvn ^Jll 4 jjujLujVI ciA^L^JI j ^jIj>JLj j^aLi. EntitiGS Q*J^ 

I g Aii]| <cLjj t 3 gs Jl LJ<Vi i ^J]| L_fljj^Jl j <lJ j jij^JalLG 


=:body> 

=/body> 



<body> 

< as 

</body> i 




Osama Elzero 


<body> 


Osama^ 

</body> 

Elzero 


Osama Elzero 


1 <body> 


Osama 

&nbsp:&mbspi&nbsp;&nbsp: Elzero 

1 </body> 


Osama Elzero 


& Non breaking space ; 


<body> 

&ltj 

</body> 


< 


& less than; 



<body> 

filt;div cla&&- ,, osama 

</body> 


<div class="osama" 


<body> 

&lt;div class= ,1 05ama ll figl:;| « 
</body> 


&lt;div class="osama"figt; 
&ll;/div&gt; 


<div class= ,, osama' f 



<div class- n osama ft 


> 








<div class="osama"> </div> 
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& 





Acent; &pound; &yen; &euro 

L o py" i q 1i C ScDpy: 

I i£demar< &reg: 


& 




£¥€ 


Copyright © Trademark ® 


#21 Learn Html - Create A Nice Form 

^SS cJC ‘"'1 a^ o V'U J-al^ fOTm JSjuj J-a*J cJLl® IJa 


#24 Learn Html - Simple Layout 


cUllb HTML J' <J-J-Li J ^ Jlla 'Ja 


( Delimiters } I^JLo_jujI 3 ijiJI 3 iLMjJI L^jojaljujij lslJI c/biatjoJI ,josj 

Parentheses L^ouuuul (} 
Curly Brackets 3! Braces L^o^juI {} 
Brackets Lp_o._j_ul [] 
Single Quotes Ljmc_uuI " 
Double Quotes OjcjujI "" 
Angel Brackets Q_ouujI <> 
Backslash Ououuul \ 
Hyphen Ououuul - 
Accent Grave L^ouuuul ’ 
Colon Lpjcjjjl : 
Semi-Colon L|j)l_ujI ; 


End Of HTMI_ 
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